<template>
    <el-tabs v-model="activeName">
        <el-tab-pane label="ES数据集" name="first">
            <el-container style="height: 90%;overflow: hidden">
                <el-header style="height: 50px;padding-top: 10px;padding-right: 7%">
                    <el-button @click="refreshEs" icon="el-icon-refresh" circle type="primary"
                               style="float: right;"></el-button>
                    <el-button @click.prevent="addEsDataSource" icon="el-icon-circle-plus-outline" type="primary" circle
                               style="float: right;margin-right: 1%"></el-button>
                </el-header>
                <el-main :class="fitContent" style="margin-left: 4%;max-height: 470px">
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(personalCard, index) in cardsData" :key="index"
                            style="">
                        <personal-data-card :personalCard="personalCard" @getPersonal="getPersonalData"
                                            style="margin:20px 19.5%;width: 70%; "></personal-data-card>
                    </el-col>
                </el-main>
                <el-footer style="text-align: center;height: 30px">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageNo"
                            :page-sizes="[8, 16, 24, 32]"
                            :page-size="pageSize"
                            background
                            layout="prev, pager, next"
                            :total=this.totalCount>
                    </el-pagination>
                </el-footer>
                <!--<register-dialog v-on:refresh="refresh"></register-dialog>-->
                <personal-data-info-dialog></personal-data-info-dialog>
                <personal-data-pre-dialog></personal-data-pre-dialog>
                <es-service-dialog></es-service-dialog>
            </el-container>
        </el-tab-pane>
        <el-tab-pane label="外部数据源" name="second">
            <el-container style="height: 90%">
                <el-header style="height: 50px;padding-top: 10px;padding-right: 7%">
                    <el-button @click="refresh1" icon="el-icon-refresh" circle type="primary"
                               style="float: right;"></el-button>
                    <el-button @click.prevent="addDataSource" icon="el-icon-circle-plus-outline" type="primary" circle
                               style="float: right;margin-right: 1%"></el-button>
                </el-header>
                <el-main :class="fitContent" style="margin-left: 4%;max-height: 470px">
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(personalCard, index) in externalData" :key="index" style="">
                        <external-data-card :personalCard="personalCard" @getExternal="getExternalData"
                                            style="margin:20px 19.5%;width: 70%; "></external-data-card>

                    </el-col>
                </el-main>
                <el-footer style="text-align: center;height: 30px">
                    <el-pagination
                            @size-change="handleSizeChange1"
                            @current-change="handleCurrentChange1"
                            :current-page="pageNo1"
                            :page-sizes="[8, 16, 24, 32]"
                            :page-size="pageSize1"
                            background
                            layout="prev, pager, next"
                            :total=this.totalCount1>
                    </el-pagination>
                </el-footer>
                <!--<register-dialog v-on:refresh="refresh"></register-dialog>-->
                <pg-source @getExternal2="getExternalData"></pg-source>
                <external-datapre-dialog></external-datapre-dialog>
                <external-data-info-dialog></external-data-info-dialog>
            </el-container>
        </el-tab-pane>
    </el-tabs>

</template>

<script>

    import personalDataCard from '../space/personalDataCard.vue'
    import personalDataInfoDialog from '../space/personalDataInfoDialog.vue'
    import personalDataPreDialog from '../space/personalDataPreDialog.vue'
    import externalDatapreDialog from '../space/externalDataPreDialog.vue'
    import externalDataInfoDialog from '../space/externalDataInfoDialog'
    import esServiceDialog from '../space/esServiceDialog'
    import externalDataCard from '../space/externalDataCard'
    import pgSource from '../space/pgSource'

    export default {
        name: "personalModel",
        components: {
            personalDataCard,
            personalDataInfoDialog,
            personalDataPreDialog,
            externalDatapreDialog,
            esServiceDialog,
            externalDataCard,
            pgSource,
            externalDataInfoDialog
        },
        data() {
            return {
                activeName: 'second',
                fileList: [],
                totalCount: 0,
                pageSize: 8,
                pageNo: 1,
                totalCount1: 0,
                pageSize1: 8,
                pageNo1: 1,
                cardsData: {},
                externalData: {}
            };
        },
        computed: {
            fitContent() {
                if (window.screen.height >= 1000) {
                    return 'longDataset'
                } else {
                    return 'shortDataset'
                }
            }
        },
        watch: {
            activeName(){
              if(this.activeName=='second'){
                  this.pageNo1=1;
              }else{
                  this.pageNo=1;
              }
            },
            pageSize() {
                this.getModel();
            },
            pageNo() {
                this.getModel();
            },
            pageSize1() {
                this.getExternalData();
            },
            pageNo1() {
                this.getExternalData();
            }
        },
        methods: {
            refreshEs(){

            },
            addEsDataSource(){

            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.refresh();
            },
            handleCurrentChange(val) {
                this.pageNo = val;
                this.refresh();
            },
            handleSizeChange1(val) {
                this.pageSize1 = val;
                this.refresh1();
            },
            handleCurrentChange1(val) {
                this.pageNo1 = val;
                this.refresh1();
            },

            refresh() {
                this.cardsData = null;
                this.getPersonalData();
            },
            refresh1() {
                this.externalData = null;
                this.getExternalData();
            },
            addDataSource() {
                this.$Bus.$emit('pgDataSource', true);
            },
            getPersonalData() {
                let that = this;
                // let url = 'http://192.168.1.5:9000/dbfg/parallel/get?pageSize=' + this.pageSize + '&pageNo=' + this.pageNo;
                this.$axios.get(that.$URL.datasetListFinishUrl + that.pageSize + "&pageNo=" + that.pageNo).then(res => {
                    if (res.code === 200) {
                        that.cardsData = res.body.result;
                        // console.log(typeof(that.cardsData));
                        that.totalCount = res.body.totalCount;
                    } else {
                        that.$message({
                            type: 'warning',
                            message: res.data.message
                        })
                    }
                }).catch(function (error) {
                    console.log(error);
                    that.$message({
                        type: 'warning',
                        message: '个人数据获取失败！'
                    })
                })
            },
            getExternalData() {
                let that = this;
                // let url = 'http://192.168.1.5:9000/dbfg/parallel/get?pageSize=' + this.pageSize + '&pageNo=' + this.pageNo;
                this.$axios.get(that.$URL.externalDataGetUrl + that.pageSize1 + "&pageNo=" + that.pageNo1).then(res => {
                    if (res.code === 200) {
                        that.externalData = res.body.result;
                        // console.log(typeof(that.cardsData));
                        that.totalCount1 = res.body.totalCount;
                    } else {
                        that.$message({
                            type: 'warning',
                            message: res.data.message
                        })
                    }
                }).catch(function (error) {
                    console.log(error);
                    that.$message({
                        type: 'warning',
                        message: '外部数据源获取失败！'
                    })
                })
            }
        },
        created() {
            this.getPersonalData();
            this.getExternalData();
            let that=this;
            this.$Bus.$on('externalDataRefresh', params => {
                that.getExternalData();
            });

        }
    }
</script>

<style>
    .longDataset {
        min-height: 700px;
    }

    .shortDataset {
        min-height: 300px;
    }


</style>